<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#box{
				display: flex;
			}
			.user>input,.password>input{
				width: 300px;
				height: 30px;
				border-radius: 18px;
			}
			button{
				cursor: pointer;
			}
			.btn{
				width: 50px;
				height: 20px;
				background-color: skyblue;
				border: 2px solid darkblue;
			}
			.left{
				width: 200px;
				height: 100vh;
				text-align: center;
				margin-right: 20px;
				background-color: lightgray;
			}
			.left>div{
				margin-bottom: 20px;
				padding: 10px;
				background-color: darkorange;
				cursor: pointer;
			}
			.right{
				width: 800px;
				height: 100vh;
				text-align: center;
			}
			/* .right>div{
				margin-bottom: 20px;
			} */
			.ShuRu>div{
				margin-bottom: 20px;
			}
			table{
				width: 800px;
				height: 50px;
				table-layout: fixed;
				margin: 0 auto;
				margin-top: 20px;
			}
		</style>
	</head>
	<body><div id="box">
		<div class="left">
			<div class="d1">
				<h2>首页</h2>
			</div>
			<div class="d2">
				<h2>信息录入</h2>
			</div>
			<div class="d3">
				<h2>展示</h2>
			</div>
		</div>
		<div class="right">
			<div class="show01">
				<h2>欢迎</h2>
			</div>
		    <div class="ShuRu">
		    	<div class="user">
		    		姓名：<input type="text" id="user"  value="" />
		    	</div>
		    	<div class="password">
		    		密码：<input type="password" id="password"  value="" />
		    	</div>
		    	<div class="sex">
		    		<input type="radio" name="sex"  value="1" />男
		    		<input type="radio" name="sex"  value="2" />女
	
		    	</div>
				<div class="XueWei">
				    学位：
					<select class="sel">
						<option>学士</option>
						<option >硕士</option>
						<option >博士</option>
					</select>
				</div>
				<button type="button" class="btn">提交</button>
		    </div>
			<div class="ZhanShi">
				<table border="1" cellspacing="0" cellpadding="0">
					<thead>
						<tr>
							<td>序号</td>
							<td>姓名</td>
							<td>密码</td>
							<td>性别</td>
							<td>学位</td>
							<td>操作</td>
						</tr>
					</thead>
					<tbody>
						<!-- <tr>
							<td>${i+1}</td>
							<td>${arr[i].user}</td>
							<td>${arr[i].password}</td>
							<td>${getsexFn(arr[i].sex)}</td>
							<td>${arr.xw}</td>
							<td><button type="button">删除</button></td>
						</tr> -->
					</tbody>
				</table>
				<button type="button" onclick="delAll()">全部删除</button>
				<button type="button" onclick="bs(this)">隔行变色</button>
			</div>
		</div>
	</div>
	</body>
	<script type="text/javascript">
		/* tab切换 */
		var divL=document.querySelectorAll(".left>div");
		var divR=document.querySelectorAll(".right>div");
		for(i=0;i<divL.length;i++){
			divL[i].index=i;
			divL[i].onclick = function(){
				for(i=0;i<divL.length;i++){
					divL[i].style.background = ""
				}
				this.style.background="red";
				for (n=0;n<divR.length;n++) {
					divR[n].style.display="none"
				}
				divR[this.index].style.display="block"
			}
		}
		/* 本地存储 */
		if(localStorage.cl){
			var arr=JSON.parse(localStorage.cl);
			/* show(arr); */
		} else{
			var arr = [];
			localStorage.cl=JSON.stringify(arr);
		}
		/* 点击添加 */
		var user=document.querySelector(".ShuRu>.user>#user")
		var password=document.querySelector(".ShuRu>.password>#password");
		var sexs=document.querySelectorAll(".sex>input[type='radio']");
		var sel=document.querySelector(".XueWei>.sel");
		var btn=document.querySelector(".ShuRu>.btn");
		
		
		btn.onclick=function(){
			if(user.value&&password.value){
				alert("提交成功");
			}else{
				alert("请输入内容");
				return false;
			}
			var obj = {
				user:user.value,
				password:password.value,
				sex:getsexV(),
				xw:sel.value,
				id:+new Date()
			}
			arr.push(obj);
			localStorage.cl=JSON.stringify(arr);
			show(arr);
			user.value=password.value=""
		}
		/* 获取单选值 */
		function getsexV(){
			for(var i=0;i<sexs.length;i++){
				if(sexs[i].checked){
					return sexs[i].value;
				}
			}
		}
		function getsexFn(value){
			return value==1?"男":"女"
		}
		/* 渲染数据 */
		var tbody = document.querySelector("tbody");
		function show(arr){
		    tbody.innerHTML=""
			for(i=0;i<arr.length;i++){
				tbody.innerHTML += `
				    <tr>
				    	<td>${i+1}</td>
				    	<td>${arr[i].user}</td>
				    	<td>${arr[i].password}</td>
				    	<td>${getsexFn(arr[i].sex)}</td>
				    	<td>${arr[i].xw}</td>
				    	<td>
						    <button type="button" onclick="del(${arr[i].id},this)">删除</button>
						    <button type="button" onclick="xg(${arr[i].id},this)">修改</button>
						</td>
				    </tr>
				`;
			}
		}
		/* 删除数据 */
		function del(id,t){
			for(var i=0;i<arr.length;i++){
				if (arr[i].id == id) {
					arr.splice(i,1)
				}
			}
			localStorage.cl = JSON.stringify(arr);
			show(arr)
		}
		/* 修改 */
		function xg(id,t){
			if(t.innerHTML=="修改"){
			    t.innerHTML="完成";
				for(var i=0;i<arr.length;i++){
					if (arr[i].id==id) {
						user.value=arr[i].user;
						password.value=arr[i].password;
					} else{
						t.innerHTML="修改"
						for(var i=0;i<arr.length;i++){
							if(arr[i].id==id){
								arr[i].user=user.value;
								arr[i].password=user.password;
							}
						}
						localStorage.cl=JSON.stringify(arr);
						show(arr)
					}
				}	
			}
		}
		/* 全部删除 */
		/* var tds=document.querySelectorAll("tr") */
		function delAll(){
			arr=[];
			localStorage.cl=JSON.stringify(arr);
			show(arr)
		}
		/* 隔行变色 */
		var trs=document.querySelectorAll("tbody>tr>td");
		console.log("trs:",trs)
		/* function bs(t){
			if(t.innerHTML=="隔行变色"){
				t.innerHTML="关闭变色"
				for(var i=0;i<trs.length;i++){
					if(i%2==0){
						trs[i].style.background="orange"
					}
				}
			}else{
				t.innerHTML="隔行变色";
				for(var i=0;i<trs.length;i++){
					trs[i].style.background="";
					trs[i].style.color="black";
				}
			}
		} */
	</script>
</html>
